<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-card style="max-width: 100%">
    <el-button type="primary" class="button" @click="handleDialogValue()"
      >添加分类</el-button
    >
    <el-table
      :data="categoriesList"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template v-slot="{ row }">
          <el-row
            :class="['dbbottom', i1 === 0 ? 'dbtop' : '', 'vcenter']"
            v-for="(item1, i1) in row.children"
            :key="item1.cat_id"
          >
            <el-col :span="5">
              <el-tag
                closable
                @close="removeRightById(row.id, item1.id, row)"
                >{{ item1.cat_name }}</el-tag
              >
              <el-icon><ArrowRightBold /></el-icon>
            </el-col>
            <el-col :span="19">
              <el-row
                :class="[i2 === 0 ? '' : 'dbtop', 'vcenter']"
                v-for="(item2, i2) in item1.children"
                :key="item2.id"
              >
                <el-col :span="6">
                  <el-tag
                    type="success"
                    closable
                    @close="removeRightById(row.id, item2.id, row)"
                    >{{ item2.cat_name }}</el-tag
                  ><el-icon><ArrowRightBold /></el-icon
                ></el-col>
                <el-col :span="18">
                  <el-tag
                    type="warning"
                    v-for="item3 in item2.children"
                    :key="item3.id"
                    closable
                    @close="removeRightById(row.id, item3.id, row)"
                    >{{ item3.cat_name }}</el-tag
                  >
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" width="55"></el-table-column>
      <el-table-column prop="cat_name" label="分类名称"></el-table-column>
      <el-table-column prop="cat_deleted" label="是否有效">
        <template #default="scope">
          <el-icon v-if="scope.cat_deleted"><Check /></el-icon>
          <el-icon v-else><Close /></el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="cat_level" label="排序"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { getCategories } from '@/api/categories'
const categoriesList = ref([])
const querInfo = ref({
  type: 3,
  pagenum: 1,
  pagesize: 5
})

const total = ref(0)
const getCategoriesList = async () => {
  const res = await getCategories(querInfo.value)
  categoriesList.value = res.result
  total.value = res.total
  console.log(res)
  console.log(categoriesList.value)
}

getCategoriesList()
</script>

<style lang="scss" scoped>
.button {
  margin-bottom: 20px;
  width: 150px;
  height: 60px;
  font-size: large;
}
.el-tag {
  margin: 30px;
  width: 80px;
  height: 40px;
  margin-left: 40px;
}
.dbtop {
  border-top: 1px solid #e4e7ed;
}
.dbbottom {
  border-bottom: 1px solid #e4e7ed;
}
.vcenter {
  display: flex;
  align-items: center;
}
</style>
